<template>
    <div class="wrapper">
        <!-- 一张图片 -->
        <div class="hezuo-card card-imgonly">
            <a href="http://www.operationearth.com.cn" target=_blank>
                <h3 class="card-title text-ellipsis">
                    <span>守望地球</span>
                </h3>
                <div class="card-desc font font-normal">
                    <p>
                        守望地球创办于2012年，
                        是世界自然保护联盟(IUCN)在华单位成员。组建中国首支青少年碳测队，
                        对碳排放量和碳排放强度等信息的调查研究。作为中国第一家国际野外科研志愿者机构，
                        持有全球22个国家级自然保护区在中国市场的独家合作授权。
                        作为中国民间组织成员出席联合国气候大会及其他国际环境公约缔约方大会等高级别国际环保论坛，
                        发出来自中国民间的声音。在全国范围内启动守望地球“气候尖兵”校际伙伴计划。
                        将公益与商业资源的巧妙融合，为企业持续创造更加广泛的社会效应及商业价值。
                    </p>
                </div>
                <div class="card-other flex justify-between">
                    <div class="other-left">
                        <ul>
                            <li class="list">
                                <p class="list-title">获得荣誉：</p>
                                <ol>
                                    <li class="list-item">
                                        世界自然保护联盟（IUCN）在华成员单位（是世界上规模最大、历史最悠久的全球性非营利环保机构；截至2018年底，IUCN有36个中国会员单位）
                                    </li>
                                    <li class="list-item">2022亚运会公益合作伙伴小组
                                    </li>
                                    <li class="list-item">中国珊瑚保护联盟发起单位</li>
                                    <li class="list-item">首都自然体验产业国家创新联盟成员（由北京林学会、北京市林业碳汇工作和国际合作中心发起）</li>
                                </ol>
                            </li>
                            <li class="list">
                                <p class="list-title">气候变化及生物多样性领域全球专家委员会：</p>
                                <ol>
                                    <li class="list-item"> 超过50人（包括诺奖得主，原联合国副秘书长等气候变化领域国际知名社会活动家和专家)
                                    </li>
                                </ol>
                            </li>
                            <li class="list">
                                <p class="list-title">碳中和行动：</p>
                                <ol>
                                    <li class="list-item">
                                        2021年人民网首发“世界500强中国企业碳排放调研蓝皮书”(衡量世界500强中国企业的碳排放信息披露情况，企业为温室气体减排、为缓解气候变化所贡献的中国力量及取得的进步，以年度报告的形式，予以发布）
                                        )
                                    </li>
                                    <li class="list-item">
                                        联合清华大学首发中国城市碳中和指数（提供城市在碳中和各个板块的数据支撑，作为衡量城市碳中和进程中的动态进展的有效举措，进而为城市提供碳中和有效规划，以抓住“双碳”目标的机遇、差异性布局相关产业）
                                    </li>
                                </ol>
                            </li>
                        </ul>
                        <img src="https://img.cctvch.cn/uploads/155f792846df8a10bbc669c0cc8b8bfc.png" alt="">
                    </div>
                    <div class="other-right">
                        <ul>
                            <li class="list">
                                <p class="list-title">守望地球气候尖兵校际伙伴计划：</p>
                                <ol>
                                    <li class="list-item"> 目前已发展了覆盖全国11个省市自治区的24家气候尖兵学校，累计志愿者人数超过10万人次，联合国教科文组织为指导单位。
                                    </li>
                                </ol>
                            </li>
                            <li class="list">
                                <p class="list-title">支持全球科研课题：</p>
                                <ol>
                                    <li class="list-item">
                                        22个（国内包括国家气象局2200个气象站、国家林草局核心保护区，中科院核心研究地点等；国际包括：亚马孙热带雨林核心区、肯尼亚国家环境管理局、小笠原野生生物保护协会、柬埔寨环境保护部等）
                                    </li>
                                </ol>
                            </li>
                            <li class="list">
                                <p class="list-title">累计志愿者人数及志愿服务工时：</p>
                                <ol>
                                    <li class="list-item">超过10万人次</li>
                                    <li class="list-item">超过22万小时</li>
                                </ol>
                            </li>
                            <li class="list">
                                <p class="list-title">募集支持气候变化领域科研经费：
                                </p>
                                <ol>
                                    <li class="list-item">3200万元人民币</li>
                                </ol>
                            </li>
                            <li class="list">
                                <p class="list-title">守望地球碳中和教育基金：</p>
                                <ol>
                                    <li class="list-item">在2家5A级公募基金会设有碳中和专项基金</li>
                                </ol>
                            </li>
                            <li class="list">
                                <p class="list-title">新闻媒体报道：</p>
                                <ol>
                                    <li class="list-item">包括人民日报、人民网、经济参考报、中华网、央广网、中国新闻网、新华网等</li>
                                </ol>
                            </li>
                            <li class="list">
                                <p class="list-title">视频报道：</p>
                                <ol>
                                    <li class="list-item">包括CCTV摄制组跟拍、NHK采访、云南卫视跟拍、绿色中国行采访等</li>
                                </ol>
                            </li>
                            <li class="list">
                                <p class="list-title">守望地球分支机构：</p>
                                <ol>
                                    <li class="list-item">国内6家、国外2家</li>
                                </ol>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card-more">
                    <p>访问官网</p>
                    <section class="arrow-wrapper">
                        <section class="arrow arrow-1">
                            <ArrowVue color="#9195A3"></ArrowVue>
                        </section>
                        <section class="arrow arrow-2">
                            <ArrowVue color="#9195A3"></ArrowVue>
                        </section>
                    </section>
                </div>
            </a>
        </div>
        <!-- 没有图片 -->
        <div class="hezuo-card">
            <a href="https://lscylm.cn" target=_blank>
                <h3 class="card-title text-ellipsis">
                    <span>中关村绿色产业联盟</span>
                </h3>
                <div class="card-desc font font-normal">
                    <p>
                        中关村国联绿色产业服务创新联盟（Zhongguancun National-united Green Industry Service Innovate
                        Alliance，GIIA），联盟总部位于北京。中关村国联绿色产业服务创新联盟（简称绿色产业联盟）是由引领我国绿色产业发展,具有代表性的科研院所、企事业单位和金融机构等共同发起，经民政部门批准成立的跨行业、跨地区、全国性的社团组织，业务上接受国家发展改革委、科技部、生态环境部、中关村科技园区管理委员会等部门和单位指导。

                    </p>
                    <p>
                        宗旨：贯彻习近平生态文明思想，坚持节约资源和保护环境基本国策，落实绿色发展理念，依靠广大会员，联系各方力量，发挥桥梁纽带作用，为建立健全绿色循环低碳发展的经济体系，构建市场导向的绿色技术创新体系，培育壮大绿色产业，加快建设生态生态文明，建设美丽中国做出积极贡献。
                    </p>
                    <p>
                        使命：聚集绿色发展新资源、培育绿色技术新动能、建设绿色产业新高地。
                    </p>
                    <p>
                        愿景：共建绿水青山、共创金山银山、共迎美好生活。
                    </p>
                    <p>
                        定位：绿色产业政策的宣传平台｜绿色技术的对接平台｜绿色金融的服务平台｜典型案例推广的示范平台｜优秀技术、企业的孵化平台｜绿色发展的国际合作平台
                    </p>
                    <p>
                        服务对象：服务政府、服务企业、服务社会
                    </p>
                    <p>
                        服务领域：节能环保产业、清洁生产产业、清洁能源产业、生态环境产业、基础设施绿色升级、绿色服务等绿色产业相关领域。
                    </p>
                </div>
                <div class="card-more">
                    <p>访问官网</p>
                    <section class="arrow-wrapper">
                        <section class="arrow arrow-1">
                            <ArrowVue color="#9195A3"></ArrowVue>
                        </section>
                        <section class="arrow arrow-2">
                            <ArrowVue color="#9195A3"></ArrowVue>
                        </section>
                    </section>
                </div>
            </a>
        </div>
        <!-- 多张图片 -->
        <div class="hezuo-card card-imgmore">
            <a href="https://baike.baidu.com/item/中国汽车改装用品协会/17352397?fr=aladdin" target=_blank>
                <h3 class="card-title text-ellipsis">
                    <span>中国汽车改装用品协会新闻传媒委员会</span>
                </h3>
                <div class="card-desc font font-normal">
                    <p>
                        在习近平新时代中国特色社会主义思想的指导下，中国迎来的飞速发展的新时代，伴随各领域科技的发展，5G、物联网、人工智能、AR/VR、元宇宙等新兴技术手段涌现，汽车改装用品行业也出现了前所未有的机遇。
                    </p>
                    <p>
                        中国汽车改装用品协会，于2014年6月成立，以商务部为业务主管部门，民政部合法注册、中央国家机关工委领导下的国家一级协会，从事汽车改装相关产品的生产、贸易和服务的企事业单位和团体，在平等自愿的基础上依法联合成立的全国性、自律性、非营利性、具有独立法人资格的社会团体。
                    </p>
                    <p>
                        协会将始终坚持服务于会员企业的指导思想，贯彻落实国家关于汽车改装用品的法律法规，协助政府部门完善汽车改装用品从业范围，参与相关标准的研究制定；提供汽车改装用品市场发展现状、法律法规、行业趋势、领先技术等咨询服务；制定并监督执行行规行约，规范行业行为，协调同行价格争议，维护公平竞争。
                    </p>
                    <p>
                        为了更好的加深中国改装车用品行业的影响力，服务协会分支机构及会员单位，服务社会相关行业企业，形成系统性的宣发机制，特此成立中国汽车改装用品协会新闻传媒委员会（以下简称委员会）。
                    </p>
                </div>
                <div class="image-list flex">
                    <img src="https://img.cctvch.cn/uploads/35d8a8375e11156c5168d9d0bfcd7b74.png" alt="">
                    <img src="https://img.cctvch.cn/uploads/376c7c440c8fc7b98c295853188dec96.png" alt="">
                    <img src="https://img.cctvch.cn/uploads/76907384bf9bdb887020dec73bdfa4cb.png" alt="">
                </div>
                <div class="card-more">
                    <p>访问官网</p>
                    <section class="arrow-wrapper">
                        <section class="arrow arrow-1">
                            <ArrowVue color="#9195A3"></ArrowVue>
                        </section>
                        <section class="arrow arrow-2">
                            <ArrowVue color="#9195A3"></ArrowVue>
                        </section>
                    </section>
                </div>
            </a>
        </div>
    </div>
</template>

<script setup lang="ts">
import ArrowVue from "@/components/icon/Arrow.vue";

</script>

<style lang="scss" scoped>
.wrapper {
    margin: 55px auto;
    width: 1440px;
}

// 公用样式
.hezuo-card {
    margin-bottom: 35px;
    padding: 35px 30px;
    border: 1px solid #C6C6C6;

    a {
        color: #626675;
    }

    .card-title {
        margin-bottom: 18px;

        span {
            background-image: linear-gradient(to right, #252086 0%, #e60012 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }

    .card-desc p {
        margin-bottom: 20px;
        line-height: 24px;
    }

    .card-more {
        margin-top: 21px;
        height: 46px;
        text-align: right;

        .arrow-wrapper {
            display: inline-block;
            margin-top: 10px;
            margin-right: 10px;
            overflow: hidden;
            position: relative;
            width: 40px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            color: #9195a3;
            border-left: 1px solid #9195a3;
        }

        .arrow {
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.36s ease;
        }

        .arrow-1 {
            left: 50%;
            color: #9195a3;
        }

        .arrow-2 {
            left: -50%;
            color: #9195a3;
        }
    }

    &:hover {
        box-shadow: 0px 5px 26px 3px rgba(98, 102, 117, 0.1500);
        cursor: pointer;

        .arrow-1 {
            left: 150%;
            color: #9195a3;
        }

        .arrow-2 {
            left: 50%;
            color: #9195a3;
        }
    }
}

// 只有一张图片
.card-imgonly {
    .card-other {
        margin-top: 35px;

        .other-left {
            width: 775px;
        }

        .other-right {
            width: 560px;
        }

        .list {
            margin-bottom: 35px;
            line-height: 24px;

            .list-item::before {
                content: "";
                margin-right: 16px;
                display: inline-block;
                width: 5px;
                height: 5px;
                background: #626675;
                border-radius: 50%;
                vertical-align: middle;
            }
        }

        img {
            margin: 0 auto;
            width: 700px;
            height: 325px;
        }
    }
}

// 多张图片
.card-imgmore {
    img {
        &:first-child {
            width: 297px;
            height: 209px;
        }

        &:nth-child(2) {
            margin: 0 77px 0 58px;
            width: 238px;
            height: 176px;
        }

        &:last-child {
            width: 622px;
            height: 210px;
        }
    }
}
</style>